<template>
    <div v-if="ctrlName=='imageupload'">
        <el-card v-for="(item,index) in fileList" :body-style="{ padding: '0px' }" :style="`float:left;width:150px;height:150px;margin-right:10px;`" :key="index">
            <img :src="item.url" class="image">
        </el-card>
    </div>
    <div v-else-if="ctrlName=='fileupload'">
        <ul>
            <li v-for="(item,index) in fileList" :key="index">
                <a :href="item.url">{{item.name}}</a>
            </li>
        </ul>
    </div>
    <span v-else class="dx-text">{{text}}</span>
</template>
<script>
import {codeProvider} from '../../../assets/js/provider.js'
import toolkit from '../../../assets/js/toolkit.js'
export default {
    name: 'dx-text',
    
    props:{
        value : {type: null ,default:''},
        codeType : {type:String,default:''},
        ctrlName : {type:String,default: 'text'},
        condition : Object,
        formatter : {type:Function,default : ()=>{}},
        multiable : {type:Boolean,default : false}
    },
    data(){

        return {
            mValue : this.value,
            text : '',
            mCodeType : '',
            fileList : []
        }
    },
    watch : {
        value(val){
            if(!_.eq(this.mValue ,val)){
                this.mValue = val;
                this.initData();
            }
        },
    },
    methods : {
        initData(){
            if(this.codeType){
                let mValue = this.mValue;
    
                if(mValue===null || mValue==='') return;
                mValue = mValue === 'true' ? '1' : mValue == 'false' ? '0' : mValue;
                mValue = (mValue===!!mValue) ? (mValue ? '1' : '0') : String(mValue);

                if(this.multiable || this.ctrlName=='multiselect' || 
                    this.ctrlName=='checkbox' || this.ctrlName=='multitreeselect'){

                    mValue = mValue || '';
                    mValue = mValue.split(",");
                }else{
                    mValue = [mValue];
                }
                codeProvider.getList(this.codeType,this.condition||{}).then(result=>{
                    //树与树POJO需要自己解析
                    if(result && (result.seqType == 'tree' || result.seqType == 'tree_pojo')){
                        let codeList = result.codeList;
                        let textField = result.textField || 'text';
                        let valueField = result.valueField || 'value';
                        result = _.map(codeList || [], item => { return { text: String(item[textField]), value: String(item[valueField]), other: item } });
                    }
                    
                    if(result && Array.isArray(result)){
                        let mNameValue = [];
                        mValue.forEach(item => {

                            let tmp = result.filter(r =>{return String(r.value) == String(item);});
                            mNameValue.push(...tmp);

                        });
                        
                        if(mNameValue.length==1){
                            this.text = mNameValue[0].text;
                        }else{
                            this.text = _.map(mNameValue,"text").join(",");
                        }
                       
                    }
                });
            }else{
                this.text = this.value;
                if(this.ctrlName=='imageupload'){
                    if(this.text){
                        this.fileList = this.getThumbnail(this.text);
                    }
                }
                if(this.ctrlName=='fileupload'){
                    if(this.text ){
                        let filePath = this.text || '';
                        filePath = filePath.split(",") || [];
                        let index = 1;
                        filePath.forEach(file=>{
                            this.fileList.push({name:'文件'+index,url:file});
                            index++;
                        });
                    }
                   

                }

            }
        }
    },
    created(){
        this.initData();
    },
    mounted(){

    },
    mixins:[toolkit]
}
</script>
<style scoped>
.dx-text{
    color: #606266;
}
</style>

